<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>fatherday</title>
		<style type="text/css">
			body,html{padding: 0;margin: 0;text-align: center;line-height: 1.42;}
			.btn{width: 50px;line-height: 30px;margin: 0 auto;margin-top: 48%; border: 1px solid #e9e9e9;color: #585858;}
		</style>
	</head>
	<body>
		<div class="btn">
			今天
		</div>
		<div style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: red;z-index: -1;">
			<div class="txt" style="font-family: '微软雅黑';font-size: 24px;color: #fff;top: -50px;margin-bottom: 50px;position: absolute;width: 100%;">
				祝您节日快乐!
			</div>
			<img src="img/img2.jpg" style="width: 0;margin: 250px auto;margin-top: 60%;"/>
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			var btnanimate = setInterval(function(){
				$(".btn").animate({'width':'80px','line-height':"50px"}).animate({'width':'50px','line-height':"30px"});
			},1000);
			
			$(".btn").click(function(){
				$(".btn").hide();
				$(".txt").animate({top:'150px'});
				$("img").animate({"width":"60%"});
				clearInterval(btnanimate);
			});
			 
		</script>
	</body>
</html>
